<template>
    <div>
        <elbar></elbar>
        <elsearch v-on:getData="getData" :condition="condition"></elsearch>
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="feedbackTitle" label="标题" width="180"></el-table-column>
            <el-table-column prop="feedbackContent" label="问题描述" width="450"></el-table-column>
            <el-table-column prop="feedbackContact" label="联系方式" width="180"></el-table-column>
            <el-table-column prop="feedbackModule" label="问题位置" width="180"></el-table-column>
            <el-table-column label="处理状态" width="100">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.feedbackIsDeal" :active-value="0" :inactive-value="1" @change="handleState(scope.$index, scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="180">
                <template slot-scope="scope">
                    {{baseUtil.formatDate(scope.row.createTime)}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="small" @click="handleDetails(scope.$index, scope.row)">详情</el-button>
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <elpage v-on:getData="getData" :currentPage="currentPage" :total="total" :pageSizes="pageSizes" :pageSize="pageSize"></elpage>
    </div>
</template>

<script>

    // import {ajax} from '@/util/HttpUtil';
    import {baseUtil} from '@/util/BaseUtil';
    import elbar from "@/components/el-bar";
    import elsearch from "@/components/el-search";
    import elpage from "@/components/el-page";

    export default {
        components: {elbar, elsearch, elpage},
        name: "feedback",
        data() {
            return {
                loading: true,
                tableData: [],

                currentPage: 1,
                total : 0,
                pageSizes : [1, 5, 10, 20, 30, 40],
                pageSize : 10,
                condition : [],
                lastParams: {},

                baseUtil : baseUtil
            }
        },
        methods: {
            initCondition() {
                this.condition = [
                    {name : "问题标题", field : "feedbackTitle", placeholder: "请输入问题标题", type : "",},
                    {name : "问题描述", field : "feedbackContent", placeholder: "请输入问题描述", type : "",},
                    {name : "问题位置", field : "feedbackModule", placeholder: "请输入问题位置", type : "",},
                ]
            },
            getData(params) {
                // 获取筛选查询的数据
                // let data = {};
                // 合并对象数据
                Object.assign(this.lastParams, params);
                this.baseUtil.ajax(this, '/feedback/getFeedbackList', this.lastParams, (response) => {
                    this.tableData = response.data.list;
                    this.pageSize = response.data.pageSize;
                    this.total = response.data.total;
                    this.currentPage = response.data.pageNum;
                }, "post");
            },
            handleDetails(index, row) {

            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                this.$confirm('此操作将删除该反馈信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    ajax(this, '/feedback/deleteFeedback', {
                        feedbackId : row.feedbackId,
                    }, (response) => {
                        this.$notify({
                            title: response.message,
                            type: 'success'
                        });
                        this.getData({
                            rows : this.pageSize,
                            page : this.currentPage
                        });
                    }, "post");
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleState(index, row){
                this.baseUtil.ajax(this, '/feedback/modifyDealState', {
                    feedbackId : row.feedbackId,
                    feedbackIsDeal : row.feedbackIsDeal
                }, (response) => {
                    this.$notify({
                        title: response.message,
                        type: 'success'
                    });
                }, "post");
            }
        },
        created() {
            this.initCondition();
            this.loading = false
        }
    }
</script>

<style>

    .el-table th>.cell{
        text-align: center;
    }

</style>
